<template>
    <div @click="share_visible = false" class="shortPlayer" style="position: relative;height: calc(100vh - 4rem - 4px);">
        <div class="position-relative height-100b width-100b scroll-window" ref="bgScroll">
            <div :key="index"
                :style="'background:url(' + item.first_frame + ') no-repeat center center;background-size:cover;overflow: hidden;filter: blur(30px);top:' + (index * 100) + '%'"
                class="player-item" v-for="(item, index) in data"></div>
        </div>
        <el-row ref="scollLimit">
            <el-col :span="is_full ? 24 : 18">
                <div id="player" ref="player"></div>
                <div class="author-info" v-if="!scrolling && data[current_index]">
                    <div @click="toPath('/user-homepage?user_id=' + data[current_index].author.id)"
                        class="color-eee font-18 cursor-pointer">@{{ data[current_index].author.name }}</div>
                    <div class="color-fff mt-8 font-16 text-line3">
                        <span class="color-eee">{{ data[current_index].creation_name }}</span>
                        <span :key="index" class="color-yellow-light cursor-pointer"
                            v-for="(item, index) in  data[current_index].labels">#{{ item }}</span>
                    </div>
                    <div class="position-absolute color-fff need-pay marginTop5 hand" style="width: 300px;"
                        v-if="data[current_index].ad_info">
                        <span style="font-size: 14px;">广告</span>
                        <span @click.stop="openAd(data[current_index].ad_info.url)" class="pl-5 color-yellow-light">
                            跳转详情
                            <i class="el-icon-arrow-right"></i>
                        </span>
                    </div>
                </div>

                <div class="need-recharge" style="z-index: 100000;" v-if="!scrolling && data[current_index]"
                    v-show="need_recharge">
                    <div class="need-recharge-close">
                        <i @click="need_recharge = false"
                            class="el-icon el-icon-close color-fff cursor-pointer font-12"></i>
                    </div>
                    <el-image :src="require('@/assets/icon/live/coin.png')" fit="cover"
                        style="width: 65px;height: 65px;margin-top: 23px;"></el-image>
                    <div class="mt-15 font-18 color-fff">{{ $store.state.config.coin_name }}不足</div>
                    <div class="mt-5 color-fff font-13">{{ $store.state.config.coin_name }}余额不足 请先充值</div>
                    <div @click="toRecharge" class="need-recharge-recharge cursor-pointer">立即充值</div>
                </div>

                <!-- 视频右边是作者信息 -->
                <div class="more-info flex flex-dre-column" v-if="!scrolling && data[current_index]">
                    <div @click="toPath('/user-homepage?user_id=' + data[current_index].author.id)"
                        class="position-relative cursor-pointer">
                        <el-avatar :size="45" :src="data[current_index].author.avatar"></el-avatar>
                        <div @click.stop="attentionFun(data[current_index].author.id, data[current_index])"
                            class="position-absolute more-info-attention cursor-pointer"
                            v-if="!data[current_index].attention">+</div>
                    </div>
                    <div class="mt-20 color-fff font-15 text-center flex flex-dre-column align-center">
                        <div v-show="!like_loading">
                            <el-image :src="require('@/assets/icon/video/like.png')"
                                @click.stop="likeAction(1); share_visible = false" class="cursor-pointer" fit="fill"
                                style="width: 32px;height:32px;" v-show="!data[current_index].liked_count"></el-image>
                            <el-image :src="require('@/assets/icon/video/liked.png')"
                                @click.stop="likeAction(0); share_visible = false" class="cursor-pointer" fit="fill"
                                style="width: 32px;height:32px;" v-show="data[current_index].liked_count"></el-image>
                        </div>
                        <el-image :src="require('@/assets/gif/liking.gif')" class="cursor-pointer" fit="fill"
                            style="width: 32px;height:32px;" v-show="like_loading"></el-image>
                        <span>{{ data[current_index].like_count | formatNumber }}</span>
                    </div>
                    <div @click.stop="is_full = !is_full; share_visible = false"
                        class="mt-13 color-fff font-15 text-center flex flex-dre-column align-center">
                        <el-image :src="require('@/assets/icon/video/comment.png')" class="cursor-pointer" fit="fill"
                            style="width: 32px;height:32px;"></el-image>
                        <span>{{ data[current_index].comment_count | formatNumber }}</span>
                    </div>
                    <div @click.stop="share_visible = !share_visible"
                        class="mt-13 color-fff font-15 text-center flex flex-dre-column align-center position-relative">
                        <el-image :src="require('@/assets/icon/video/share.png')" class="cursor-pointer" fit="fill"
                            style="width: 32px;height:32px;"></el-image>
                    </div>
                    <div @click.stop="$refs.complaint.visible = true"
                        class="mt-13 color-fff font-13 text-center flex flex-dre-column align-center">
                        <el-image :src="require('@/assets/icon/video/complaint.png')" class="cursor-pointer" fit="fill"
                            style="width: 32px;height:32px;"></el-image>
                        <span>举报</span>
                    </div>

                    <div class="mt-30 more-info-next-prev color-fff font-28">
                        <div :style="current_index == 0 ? 'pointer-events: none;color:#999' : ''" @click.stop="prev">
                            <i class="el-icon el-icon-arrow-up cursor-pointer"></i>
                        </div>
                        <div @click.stop="next" class="mt-40">
                            <i class="el-icon el-icon-arrow-down cursor-pointer"></i>
                        </div>
                    </div>
                </div>
                <need-pay :creation="data[current_index]" @donePay="donePay" @needRecharge="need_recharge = true" ref="fee"
                    v-if="data.length > 0 && data[current_index]"></need-pay>
                <complaint :creation="data[current_index]" ref="complaint" v-if="data[current_index] && !scrolling">
                </complaint>
            </el-col>
            <el-col :span="is_full ? 0 : 6">
                <div class="back151225 colorFFF comment-window" style="height:100%"
                    v-if="data[current_index] && !scrolling">
                    <el-tabs v-model="active">
                        <el-tab-pane :label="'留言 ' + data[current_index].comment_count" name="comment">
                            <comment :creation="data[current_index]" ref="comment"></comment>
                        </el-tab-pane>

                        <el-tab-pane :label="'作品 ' + $store.state.video.creation_total" name="creation">
                            <creation :creation="data[current_index]" @changeVideo="changeVideo" ref="creation"></creation>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </el-col>
        </el-row>
        <div class="position-absolute share-card" v-if="share_visible">
            <div class="color-fff">分享视频</div>
            <div class="font-18 color-fff flex align-center mt-10 share-box">
                <div @click.stop="changeFriendIndex('decrement')" class="width-8b text-center">
                    <i class="el-icon-arrow-left cursor-pointer"></i>
                </div>
                <div class="flex align-center width-84b scroll-friend" ref="friend" style="scroll-behavior: smooth;"
                    v-if="contacters.length > 0">
                    <div :class="{ 'ml-4': index > 0 }" :key="index" v-for="(item, index) in contacters">
                        <div @click.stop="shareToFriend(item.userProfile.userID)"
                            class="width-60 text-center cursor-pointer">
                            <div class="flex jus-center">
                                <el-avatar :size="45" :src="item.userProfile.avatar"></el-avatar>
                            </div>
                            <div :title="item.userProfile.nick" class="font-13 text-line1">{{ item.userProfile.nick }}</div>
                        </div>
                    </div>
                </div>
                <div class="text-center flex-1 color-999" v-else>暂无好友，去找别人聊聊吧~</div>
                <div @click.stop="changeFriendIndex('increment')" class="width-8b text-center">
                    <i class="el-icon-arrow-right cursor-pointer"></i>
                </div>
            </div>
            <div @click.stop="copyLink"
                class="mt-20 text-center pt-8 pb-8 color-fff width-90b cursor-pointer flex align-center jus-center"
                style="margin-left:5%;border:1px solid #353047;">
                <i class="el-icon-paperclip font-14"></i>
                <span>复制链接</span>
            </div>
        </div>
        <div class="child-video">
            <child-pop :creation="data[current_index]" ref="child"></child-pop>
        </div>
        <need-pay :creation="data[current_index]" @donePay="donePay" @needRecharge="need_recharge = true"
            ref="fee"></need-pay>
    </div>
</template>

<script>
import Player from 'xgplayer'
import HlsPlayer from 'xgplayer-hls'
import sortPlugin from '@/components/video/player-plugin/sort'
import { Events } from 'xgplayer'
import fullIcon from '@/assets/icon/video/full.png'
import mutedIcon from '@/assets/icon/video/muted_empty.png'
import mutedInvalidIcon from '@/assets/icon/video/muted_invalid_empty.png'
import comment from './comment.vue'
import needPay from '@/components/video/need-pay.vue'
import complaint from '@/components/video/complaint.vue'
import childPop from '@/components/video/creation/child-pop.vue'
import creation from './creation.vue'
import { mapState } from 'vuex'
export default {
    components: {
        comment,
        needPay,
        complaint,
        childPop,
        creation,
    },
    data() {
        return {
            data: [],
            query: {
                page: 1,
                size: 10,
                creation_type: 'short',
            },
            current_index: 0,
            player: null,
            played: false,
            currentActive: 0,
            scrolling: false,
            player_height: 0,
            is_full: true,
            creation: null,
            need_recharge: false,
            like_loading: false,
            share_visible: false,
            current_friend_index: 0,
            active: 'comment',
            submitComplete: false,
        }
    },

    watch: {
        player(newV, oldV) {
            console.log('变化', newV)
            this.share_visible = false
        },
        user(newValue, oldValue) {
            // 在这里可以监听到user的变化
            console.log('退出登录')
            this.share_visible = false

            this.$refs.complaint.visible = false

            this.$refs.fee.visible = false
            this.$refs.fee.step = 1
            this.$refs.fee.msg = ''
            this.$refs.fee.msgLength = 0
        },
    },

    mounted() {
        this.getCreation()
        this.player_height = this.$refs.player.offsetHeight
        document.getElementById('player').addEventListener('wheel', this.handleMouseWheel, {
            passive: false,
        })
    },
    beforeDestroy() {
        document.getElementById('player').removeEventListener('wheel', this.handleMouseWheel, {
            passive: false,
        })
    },
    updated() {
        this.$refs.comment.data = []
        this.$refs.comment.inited = false
        this.$refs.comment.beforeInit()
    },
    computed: {
        contacters() {
            return this.$store.state.system.contacters
        },
        ...mapState({
            user: (state) => state.user.user,
        }),
    },
    methods: {
        getCreation() {
            this.$request.get('/creation/index', this.query).then((res) => {
                this.data = this.data.concat(res.items)
                if (this.played == false) {
                    this.toPlay()
                }
            })
        },
        attentionFun(id, creation) {
            if (this.submitComplete) return
            this.submitComplete = true
            let that = this
            console.log(id, creation)
            this.$request
                .post('/user-attention/create/' + id)
                .then((res) => {
                    this.submitComplete = false
                    creation.attention = 1
                    this.$message({
                        message: '关注成功',
                        type: 'success',
                        customClass: 'messageClass',
                    })
                })
                .catch((error) => {
                    this.submitComplete = false
                })
        },
        copyLink() {
            let text = 'http://ground.miazh.com/#/pages/short/short?id=' + this.data[this.current_index].creation_id
            const inputElement = document.createElement('input')
            inputElement.value = text
            document.body.appendChild(inputElement)
            inputElement.select()
            document.execCommand('copy')
            document.body.removeChild(inputElement)
            this.$message({
                message: '复制成功',
                type: 'success',
                customClass: 'super-message',
            })
            this.share_visible = false
        },

        next() {
            // console.log('点击上下图标切换视频')
            // console.log('下一个', this.current_index, this.data.length)
            let that = this
            this.share_visible = false
            if (that.current_index < that.data.length - 1) {
                that.current_index++
                this.$refs.fee.visible = false
                this.$refs.fee.step = 1
                this.$refs.fee.msg = ''
                this.$refs.fee.msgLength = 0
                that.$nextTick(() => {
                    if (that.player) {
                        that.player.destroy()
                        that.player = null
                    }
                    that.scrolling = true
                    let ref = that.$refs.bgScroll
                    ref.scrollTop = that.current_index * that.player_height
                    setTimeout(() => {
                        that.toPlay()
                    }, 500)
                })
                if (that.current_index + 5 >= that.data.length) {
                    that.query.page++
                    that.getCreation()
                }
            }
        },
        prev() {
            this.share_visible = false
            let that = this
            if (that.current_index > 0) {
                that.current_index--
                this.$refs.fee.visible = false
                this.$refs.fee.step = 1
                this.$refs.fee.msg = ''
                this.$refs.fee.msgLength = 0
                that.$nextTick(() => {
                    if (that.player) {
                        that.player.destroy()
                        that.player = null
                    }
                    that.scrolling = true
                    let ref = that.$refs.bgScroll
                    ref.scrollTop = that.current_index * that.player_height
                    setTimeout(() => {
                        that.toPlay()
                    }, 500)
                })
            }
        },

        switch() {
            this.$nextTick(() => {
                if (this.$refs.creation) {
                    this.$refs.creation.data = []
                    this.$refs.creation.inited = false
                    this.$refs.creation.beforeInit()
                }
            })
        },
        changeVideo(item, index) {
            console.log('changeVideo', item, index)
            this.$refs.child.visible = true
            this.$refs.child.switch(item, index)
            this.sideVideo()
            // this.$emit('sideVideo', item)
        },
        sideVideo(value) {
            this.player.pause()
        },
        handleMouseWheel(e) {
            if (this.scrolling == true) {
                return false
            }
            this.share_visible = false

            let valid_action = false
            if (e.wheelDelta) {
                // 判断浏览器IE，谷歌滑轮事件
                if (e.wheelDelta > 0) {
                    if (this.current_index > 0) {
                        this.current_index--
                        this.$refs.fee.visible = false
                        this.$refs.fee.step = 1
                        this.$refs.fee.msg = ''
                        this.$refs.fee.msgLength = 0
                        valid_action = true
                    }
                }
                if (e.wheelDelta < 0) {
                    // 当滑轮向下滚动时
                    if (this.current_index < this.data.length - 1) {
                        this.current_index++
                        this.$refs.fee.visible = false
                        this.$refs.fee.step = 1
                        this.$refs.fee.msg = ''
                        this.$refs.fee.msgLength = 0
                        valid_action = true
                    }
                }
            } else if (e.detail) {
                // Firefox滑轮事件
                if (e.detail > 0) {
                    if (this.current_index < this.data.length - 1) {
                        this.current_index++
                        this.$refs.fee.visible = false
                        this.$refs.fee.step = 1
                        this.$refs.fee.msg = ''
                        this.$refs.fee.msgLength = 0
                        valid_action = true
                    }
                }
                if (e.detail < 0) {
                    if (this.current_index > 0) {
                        this.current_index--
                        this.$refs.fee.visible = false
                        this.$refs.fee.step = 1
                        this.$refs.fee.msg = ''
                        this.$refs.fee.msgLength = 0
                        valid_action = true
                    }
                }
            }

            if (valid_action) {
                this.$nextTick(() => {
                    if (this.player != null) {
                        this.player.destroy()
                        this.player = null
                    }

                    this.scrolling = true
                    let ref = this.$refs.bgScroll
                    ref.scrollTop = this.current_index * this.player_height
                    console.log(ref, ref.scrollTop)
                    let that = this
                    // console.log(this.data[this.current_index])
                    if (this.data[this.current_index].need_pay) {
                        setTimeout(() => {
                            that.scrolling = false
                        }, 500)
                    }
                    setTimeout(() => {
                        that.toPlay()
                    }, 700)
                })
                if (this.current_index + 5 >= this.data.length) {
                    this.query.page++
                    this.getCreation()
                }
            }
            // if(this.){

            // }

            // //加载完了再 恢复true
            // this.$nextTick(() => {
            //     this.scrolling = false
            //     console.log(this.scrolling)
            // })
        },
        changeFriendIndex(type) {
            let width = document.getElementsByClassName('share-box')[0].offsetWidth * 0.84
            let placeholer_num = Math.round(width / 62)
            let end_index = this.contacters.length - placeholer_num
            if (type == 'increment') {
                if (this.current_friend_index < end_index) {
                    this.current_friend_index++
                    document.getElementsByClassName('scroll-friend')[0].scrollLeft = this.current_friend_index * 62
                }
            } else {
                if (this.current_friend_index > 0) {
                    this.current_friend_index--
                    document.getElementsByClassName('scroll-friend')[0].scrollLeft = this.current_friend_index * 62
                }
            }
        },

        shareToFriend(user_id) {
            console.log(user_id)
            this.$store.state.system.message = {
                to: user_id,
                payload: {
                    data: JSON.stringify({
                        longItem: {},
                        postItem: {},
                        shortItem: {
                            creation_id: this.data[this.current_index].creation_id,
                            first_frame: this.data[this.current_index].first_frame,
                        },
                        type: 'short',
                    }),
                    description: '',
                    extension: '',
                },
            }
            this.share_visible = false
            this.$message({
                message: '已分享',
                type: 'success',
                customClass: 'super-message',
            })
        },

        donePay(value) {
            this.data[this.current_index].need_pay = false
            this.data[this.current_index].m3u8_media = value.m3u8_media
            this.data[this.current_index].media_urls = value.media_urls
            this.toPlay()
            // let param = {
            //     value: value,
            //     index: this.index,
            // }
            // this.$emit('setMedia', param)
        },
        toRecharge() {
            this.$router.push({ path: '/wallet/recharge' })
        },
        likeAction(type) {
            let param = {
                creation_id: this.data[this.current_index].creation_id,
                type: type,
            }
            this.like_loading = true
            this.$request
                .post('/creation/like/create', param)
                .then((res) => {
                    if (type) {
                        this.data[this.current_index].like_count++
                        this.data[this.current_index].liked_count = true
                    } else {
                        this.data[this.current_index].like_count--
                        this.data[this.current_index].liked_count = false
                    }
                })
                .catch((err) => {
                    this.$message.error(err.message)
                })
                .finally(() => {
                    this.$nextTick(() => {
                        this.like_loading = false
                    })
                })
        },
        openAd(url) {
            window.open(url)
        },
        toPath(url) {
            //this.$router.push(url)
            if (Object.keys(this.$store.state.user.user).length) {
                window.open(url, '_blank')
            } else {
                this.$store.dispatch('system/showLogin')
            }
        },

        toPlay() {
            if (this.player) {
                this.player.destroy()
                this.player = null
            }
            if (this.data[this.current_index].need_pay) {
                this.$nextTick(() => {
                    this.scrolling = false
                    this.$refs.fee.visible = true
                })
                return true
            }
            this.$nextTick(() => {
                if (this.data[this.current_index].m3u8_media) {
                    this.player = new Player({
                        id: 'player',
                        url: this.data[this.current_index].m3u8_media,
                        autoplay: true,
                        fluid: true,
                        plugins: [HlsPlayer, sortPlugin],
                        ignores: ['replay'],
                        cssFullscreen: false,
                        playbackRate: [0.5, 1, 1.5, 2],
                        controls: true,
                        marginControls: true,
                        commonStyle: {
                            playedColor: '#ffffff',
                            cachedColor: 'transparent',
                            sliderBtnStyle: {
                                background: '#fff',
                            },
                        },
                        icons: {
                            fullscreen: fullIcon,
                            volumeMuted: mutedIcon,
                            volumeLarge: mutedInvalidIcon,
                            volumeSmall: mutedInvalidIcon,
                        },
                    })
                } else {
                    this.player = new Player({
                        id: 'player',
                        url: this.data[this.current_index].media_urls[0],
                        autoplay: true,
                        fluid: true,
                        plugins: [sortPlugin],
                        ignores: ['replay'],
                        cssFullscreen: false,
                        playbackRate: [0.5, 1, 1.5, 2],
                        controls: true,
                        marginControls: true,
                        commonStyle: {
                            playedColor: '#ffffff',
                            cachedColor: 'transparent',
                            sliderBtnStyle: {
                                background: '#fff',
                            },
                        },
                        icons: {
                            fullscreen: fullIcon,
                            volumeMuted: mutedIcon,
                            volumeLarge: mutedInvalidIcon,
                            volumeSmall: mutedInvalidIcon,
                        },
                    })
                }

                // let player = new Player({
                //     /*配置*/
                // })
                let that = this
                this.player.once('canplay', () => {
                    that.$nextTick(() => {
                        that.scrolling = false
                    })
                })

                this.player.on(Events.ENDED, () => {
                    if (window.is_loop === false || window.is_loop == undefined) {
                        if (that.current_index < that.data.length - 1) {
                            that.current_index++
                            that.$nextTick(() => {
                                that.player.destroy()
                                that.player = null
                                that.scrolling = true
                                let ref = that.$refs.bgScroll
                                ref.scrollTop = that.current_index * that.player_height
                                setTimeout(() => {
                                    that.toPlay()
                                }, 500)
                            })
                            if (that.current_index + 5 >= that.data.length) {
                                that.query.page++
                                that.getCreation()
                            }
                        }
                    } else {
                        that.player.replay()
                    }
                })
                // this.player.play()
            })
        },
    },
}
</script>

<style lang="scss" scoped>
.player-item {
    height: 100% !important;
    position: absolute;
    // top: calc(4rem + 4px);
    width: 100% !important;
    padding-top: 0 !important;
    background: transparent;
}

.el-row {
    height: 100% !important;
    position: absolute;
    // top: calc(4rem + 4px);
    width: 100% !important;
    padding-top: 0 !important;
    background: transparent;
    top: 0;
}

/deep/.el-col {
    height: 100% !important;
    position: relative;
}

#player {
    height: 100% !important;
    position: absolute;
    // top: calc(4rem + 4px);
    width: 100% !important;
    padding-top: 0 !important;
    background: transparent;
}

/deep/.xg-get-fullscreen,
/deep/.xg-volume,
/deep/.xg-volume-small,
/deep/.xg-volume-mute {
    width: 24px !important;
}

/deep/ .el-dialog.is-fullscreen {
    margin-top: 55px;
}

.scroll-window {
    overflow-y: scroll;
    scroll-behavior: smooth;
}

.scroll-window::-webkit-scrollbar {
    display: none;
}

.author-info {
    position: absolute;
    bottom: 10%;
    left: 40px;
    z-index: 10;
}

.more-info {
    position: absolute;
    right: 40px;
    top: 20%;
    z-index: 1000;

    &-attention {
        top: -2px;
        right: -5px;
        background: #ff1c6d;
        padding: 4px;
        border-radius: 100%;
        color: #fff;
        width: 10px;
        height: 10px;
        line-height: 7px;
        text-align: center;
    }

    &-next-prev {
        padding: 7px 0px;
        background: rgba(0, 0, 0, 0.2);
        text-align: center;
        border-radius: 23px;
        transform: scale(0.8);
    }
}

/deep/ .el-tabs__item {
    color: #8b8b8b;
    font-size: calc(0.89286vw + 1.14286px);
}

/deep/.el-tabs__item.is-active {
    color: #ffffff;
}

/deep/.el-tabs__active-bar {
    background: #fff;
    width: 30px !important;
    margin-left: 11px !important;
    height: 1px;
}

/deep/.el-tabs__nav-wrap::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #8b8b8b;
    z-index: 1;
}

/deep/.el-tabs__nav {
    margin-left: 30px;
}

/deep/.el-tabs {
    height: 100% !important;
}

/deep/.el-tabs__content {
    height: calc(100% - 40px) !important;
}

/deep/.el-tabs__header {
    margin: 0 !important;
}

#pane-comment {
    height: calc(100% - 30px);
    padding: 20px;
    padding-bottom: 10px;
}

/deep/.el-dialog {
    width: 25% !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    margin-left: 70px !important;
}

/deep/.child-video .el-dialog {
    width: 100% !important;
    margin-left: 0 !important;
}

/deep/.rnm {
    width: 100% !important;
    height: 100% !important;
    margin-top: calc(4rem + 4px) !important;
    margin-left: 0 !important;
    background: #0d0920 !important;
}

// /deep/.el-dialog {
//     box-shadow: none !important;
// }

/deep/.el-dialog__header,
/deep/.el-dialog__body {
    padding: 0 !important;
}

/deep/.complaint[data-v-3d3b56b7] {
    margin-left: 0 !important;
    z-index: 9999999999 !important;
}

/deep/.complaint[data-v-417ba05c],
.complaint,
.pl-20,
.pr-20 {
    margin-left: 0 !important;
}

/deep/.report {
    width: 100% !important;
    /* height: 31% !important; */
    /* margin-top: calc(4rem + 4px) !important; */
    margin-left: 0 !important;
    z-index: 100;
    margin-top: -34% !important;
}

.share-card {
    left: 73%;
    top: calc((100vh - 4rem - 4px) * 0.2 + 201px);
    z-index: 10000;
    padding: 20px;
    background: #272337;
    border-radius: 10px;
    border: 1px solid #353047;
    width: 20%;
}

.scroll-friend {
    overflow-x: scroll;
}

.scroll-friend::-webkit-scrollbar {
    display: none;
    /*隐藏滚动条*/
}

/depp/ .complaint {
    z-index: 999999999 !important;
}

.need-recharge {
    position: absolute;
    transition: 0.2s all;
    background: linear-gradient(to bottom, #ff5994, #ff1c6d);
    width: 200px;
    height: 210px;
    left: calc(50% - 100px);
    top: calc(50% - 105px);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;

    &-close {
        position: absolute;
        right: 10px;
        top: 10px;
    }

    &-recharge {
        position: absolute;
        bottom: 15px;
        color: #ff1c6d;
        background: #fff;
        width: 80%;
        text-align: center;
        padding: 5px 0px;
        border-radius: 4px;
    }
}
</style>